<template>
  <div class="home-container">
    <div class="stats-section">
      <div class="stat-card">
        <div class="stat-content">
          <div class="stat-label">商品总数</div>
          <div class="stat-value">{{ num }}</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-content">
          <div class="stat-label">用户总数</div>
          <div class="stat-value">{{ NUM }}</div>
        </div>
      </div>
    </div>

    <div class="charts-section">
      <div class="chart-container">
        <div class="chart-title">K线图分析</div>
        <div id="main" class="chart"></div>
      </div>

      <div class="chart-container">
        <div class="chart-title">数据柱状图</div>
        <div id="max" class="chart"></div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      num: 0,
      NUM: 0,
      val: [],
      x: [],
      data: [],
      kChart: null,
      barChart: null,
    }
  },
  methods: {
    initKChart() {
      this.$nextTick(() => {
        const chartDom = document.getElementById('main')
        if (chartDom) {
          // 如果图表已存在，先销毁
          if (this.kChart) {
            this.kChart.dispose()
          }
          this.kChart = echarts.init(chartDom)
          this.updateKChart()
        }
      })
    },
    updateKChart() {
      if (this.kChart && this.val.length > 0 && this.x.length > 0) {
        this.kChart.setOption({
          title: {
            text: 'K线图',
          },
          xAxis: {
            data: this.x,
          },
          yAxis: {},
          series: [
            {
              type: 'candlestick',
              data: this.val,
            },
          ],
        })
      }
    },
    initBarChart() {
      this.$nextTick(() => {
        const chartDom = document.getElementById('max')
        if (chartDom) {
          // 如果图表已存在，先销毁
          if (this.barChart) {
            this.barChart.dispose()
          }
          this.barChart = echarts.init(chartDom)
          this.updateBarChart()
        }
      })
    },
    updateBarChart() {
      if (this.barChart && this.data.length > 0) {
        this.barChart.setOption({
          title: {
            text: '柱状图',
          },
          xAxis: {
            data: this.data.map(item => item.x),
          },
          yAxis: {},
          series: [
            {
              type: 'bar',
              data: this.data.map(item => item.val),
            },
          ],
        })
      }
    },
    Cater() {
      axios
        .get('http://47.94.6.186:3001/admin/statistic/product', {
          headers: {
            token: localStorage.getItem('loginToken'),
          },
        })
        .then((res) => {
          console.log(res.data.data)
          this.num = res.data.data
        })
    },
    Yh() {
      axios
        .get('http://47.94.6.186:3001/admin/statistic/user', {
          headers: {
            token: localStorage.getItem('loginToken'),
          },
        })
        .then((res) => {
          console.log(res.data.data)
          this.NUM = res.data.data
        })
    },
    Zxt() {
      axios
        .get('http://47.94.6.186:3001/admin/data/kData', {
          headers: {
            token: localStorage.getItem('loginToken'),
          },
        })
        .then((res) => {
          console.log('K线数据:', res.data.data)
          this.val = res.data.data.val
          this.x = res.data.data.x
          this.updateKChart()
        })
        .catch((err) => {
          console.error('获取K线数据失败:', err)
        })
    },
    Zzt() {
      axios
        .get('http://47.94.6.186:3001/admin/data/simpleData', {
          headers: {
            token: localStorage.getItem('loginToken'),
          },
        })
        .then((res) => {
          console.log('柱状图数据:', res.data.data)
          this.data = res.data.data
          this.updateBarChart()
        })
        .catch((err) => {
          console.error('获取柱状图数据失败:', err)
        })
    },
  },
  mounted() {
    // 初始化图表
    this.initKChart()
    this.initBarChart()

    // 获取数据
    this.Cater()
    this.Yh()
    this.Zxt()
    this.Zzt()
  },
  beforeUnmount() {
    // 组件销毁前清理图表实例
    if (this.kChart) {
      this.kChart.dispose()
      this.kChart = null
    }
    if (this.barChart) {
      this.barChart.dispose()
      this.barChart = null
    }
  },
}
</script>
<style lang="css" scoped>
.home-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}

.stats-section {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.stat-card {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 200px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 0.9rem;
  color: #7f8c8d;
  margin-bottom: 5px;
  font-weight: 500;
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  color: #2c3e50;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.charts-section {
  display: flex;
  gap: 20px;
  width: 100%;
  height: 500px;
  margin-top: 20px;
}

.chart-container {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chart-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.chart-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #ecf0f1;
}

.chart {
  width: 100%;
  height: 400px;
  border-radius: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-container {
    padding: 15px;
  }

  .stats-section {
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  .stat-card {
    width: 100%;
    max-width: 300px;
  }

  .charts-section {
    flex-direction: column;
    height: auto;
  }

  .chart-container {
    margin-bottom: 20px;
  }

  .chart {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .stat-value {
    font-size: 1.5rem;
  }

  .stat-icon {
    font-size: 2rem;
    width: 50px;
    height: 50px;
  }

  .charts-section {
    height: auto;
  }

  .chart {
    height: 250px;
  }
}
</style>
